<template>
  <main>
    <header>
      <input type="text" placeholder="中国/zg/z">
    </header>
    <section>
      <div class="group" v-for="(group, groupIndex) in groupList" :key="groupIndex">
        <div class="group-title">{{ group.title }}</div>
        <div class="group-list">
          <div class="item" v-for="(item, itemIndex) in group.list" :key="itemIndex">{{item.name}}</div>
        </div>
      </div>
    </section>
    <section>

    </section>
  </main>
</template>

<script>
export default {
  data () {
    return {
      groupList: []
    }
  },
  created () {

  }
}
</script>



<style scoped>
header {
  display: flex;
  padding: 8px 15px;
}
input {
  flex: auto;
  border-radius: 100px;
  border: none;
  background-color: #ccc;
  padding: 5px 10px;
  text-align: center;
  outline: none;
}

</style>
